<template>
  <view class="index">
    <view class="bg"></view>
    <view class="user" v-if="isLogin">
      <image :src="userinfo.avatar" mode=""></image>
      <view class="right">
        <text class="t1">{{ userinfo.nickname }}</text>
        <text class="t2" style="margin-top: 10rpx;">积分：{{ userinfo.score }}</text>
        <text class="t2" style="margin-top: 15rpx;"><text style="position: relative;top: -5rpx;">余额：</text><text style="color: #e74c3c;font-size: 38rpx;font-weight: 600;">{{ userinfo.money }} 元</text></text>
        <text class="t2 bio" style="margin-top: 10rpx;">{{ userinfo.bio }}</text>
      </view>
    </view>
    <view class="user" v-if="!isLogin">
      <view class="to-login" @tap="navigateTo('/pages/login/login')">请登录</view>
    </view>
    <view class="m_list">
      <view class="item" @tap="navigateTo('/pages/mine/updataUser')">
        <image src="../../static/yh.png" mode=""></image>
        <text class="t3">个人资料</text>
        <text class="icon right">&#xe60f;</text>
      </view>
      <view class="item" @tap="navigateTo('/pages/mine/order')">
        <image src="../../static/order.png" mode=""></image>
        <text class="t3">我的订单</text>
        <text class="icon right">&#xe60f;</text>
      </view>
      <view class="item" @tap="navigateTo(userinfo.dirver == 0 ? '/pages/mine/applyDriving' : '/pages/myDriving/myDriving')">
        <image src="../../static/dj.png" mode=""></image>
        <text class="t3">我是司机</text>
        <text class="icon right">&#xe60f;</text>
      </view>
      <view class="item" @tap="navigateTo('/pages/mine/integral')">
        <image src="../../static/jf.png" mode=""></image>
        <text class="t3">积分</text>
        <text class="icon right">&#xe60f;</text>
      </view>
    
      <view class="item" @tap="navigateTo('/pages/mine/setting')">
        <image src="../../static/sz.png" mode=""></image>
        <text class="t3">设置</text>
        <text class="icon right">&#xe60f;</text>
      </view>
    </view>
	<view class="bottom" v-if="!showTabBar">
	  <view class="item" @tap="switchTab('/pages/index/index')">
	    <text class="icon">&#xe606;</text>
	    首页
	  </view>
	  <view class="item active" @tap="switchTab('/pages/mine/mine')">
	    <!-- <image v-if="" src="@/static/wd.png" style="width: 48rpx;height: 48rpx;margin-bottom: 10rpx;" mode=""></image> -->
	    <image src="@/static/wds.png" style="width: 48rpx;height: 48rpx;margin-bottom: 10rpx;" mode=""></image>
	    我的
	  </view>
	</view>
  </view>
</template>

<script>
import helper from '../../common/helper.js';
import api from '../../common/api.js';
export default {
  data() {
    return {
      userinfo: {
        group_id: 1,
        nickname: '',
        score: 0,
        dirver:0
      },
      isLogin:false,
	  showTabBar:false,
	  user_token:''
    };
  },
  onShow() {
    this.user_token=uni.getStorageSync('__token__')
    if (!this.user_token) {
      this.isLogin=false;
	  uni.hideTabBar()
	  this.showTabBar=false
    } else {
      this.isLogin=true;
      this.getUserInfo();
    }
  },
  methods: {
    async getUserInfo() {
      let res = await api.getUserInfo();
      this.userinfo = res.data;
	  if(this.userinfo.dirver>0){
		  uni.showTabBar()
		  this.showTabBar=true
	  }
	  uni.setStorageSync('userType',this.userinfo.dirver)
    },
	switchTab(url) {
	  uni.switchTab({
	  	url:url
	  })
	},
    navigateTo(url) {
      if(!helper.hasLogin()){
        url='/pages/login/login'
      }
	  if(url=='/pages/myDriving/myDriving'){
		  this.redire(url)
	  }else{
		  uni.navigateTo({
		    url: url
		  });
	  }
      
    },
	redire(url){
		if(!helper.hasLogin()){
		  url='/pages/login/login'
		}
		uni.redirectTo({
		  url: url
		});
	}
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
}
.bg {
  width: 100%;
  height: 260upx;
  background-color: #32c45e;
}
.user {
  width: 90%;
  display: flex;
  align-items: center;
  border-radius: 20upx;
  margin-left: 5%;
  margin-top: -110upx;
  background-color: #ffffff;
  box-shadow: 1px 1px 4px 0px #dfdfdf;
  height: 240upx;
  .to-login{
    text-align: center;
    color: #32c45e;
    width: 100%;
  }
  image {
    width: 140upx;
    height: 140upx;
    margin: 40upx;
    border-radius: 50%;
  }
  .right {
    display: flex;
    flex-direction: column;
    .t1 {
      font-size: 28upx;
      font-weight: 800;
      margin-bottom: 10upx;
    }
    .t2 {
      font-size: 24upx;
	  font-weight: 800;
    }
    .bio{
      margin-top: 30upx;
      color: #555555;
    }
  }
}
.m_list {
  width: 90%;
  margin-left: 5%;
  background-color: #ffffff;
  border-radius: 20upx;
  margin-top: 10%;
  box-shadow: 1px 1px 4px 0px #dfdfdf;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40upx 20upx;

    image {
      width: 50upx;
      height: 50upx;
    }
    .icon {
      text-align: right;
      width: 10%;
      font-size: 28upx;
      color: #d7d7d7;
    }
    .t3 {
      width: 75%;
      margin-left: 5%;
      font-size: 28upx;
    }
  }
}
.bottom {
  background-color: #ffffff;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 120upx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24upx;
    width: 33.33%;
    .icon {
      font-size: 56upx;
      color: #999999;
    }
  }
}
.active {
  color: #32c45e !important;
  .icon {
    color: #32c45e !important;
  }
}
</style>
